<script setup lang='ts'>
import { ref } from 'vue';
import type { AMapCustomExposed } from '@/components/amapCustom/types'
import useSearch from "./useSearch"
import { useMarkerStore } from "@/stores/useMarkerStore";
import type { IUvPopup } from '@/common/UvTypes'
import type { IPopupFlexExposed } from '@/components/popupFlex/types';
import { storeToRefs } from 'pinia';
import { onLoad } from "@dcloudio/uni-app"

const amapRef = ref<AMapCustomExposed | null>(null)

const popup = ref<IUvPopup | null>(null)
const popupFlexRef = ref<IPopupFlexExposed | null>(null)

const { searchKeyRef, handleSearch, openJournalsRef } = useSearch(amapRef, popup, popupFlexRef)

const markerStore = useMarkerStore()
const { state } = storeToRefs(markerStore)

onLoad((e) => {
  const id = e!.id as string
  if (id) {
    searchKeyRef.value = id
    handleSearch()
  }
})

// FIXME 后端处理获得 互联网用户Marker的数据 不用 token, 用户可以查看你 日志列表，但要查看详情需要 登录。

</script>

<template>
  <div class='friend__container'>
    <!-- 地图区域 -->
    <view class="friend-map__warpper" id="friend-map__warpper">
      <amapCustom ref="amapRef" rootId="friend-map__warpper" />
    </view>

    <popupFlex ref="popupFlexRef" style="--popup-flex-container-height-min:0">
      <template #header>
        <view class="friend-popup__header mlr-40 mt-20">
          <view class="friend-popup__header-title">
            <text class="friend-popup__header-title__name" style="font-weight: 700;">{{
              state.activeMarkerExtra?.poi.name }}</text>
            <view class="friend-popup__header-title__address">{{
              `${state.activeMarkerExtra?.poi.adname}${state.activeMarkerExtra?.poi.address}${state.activeMarkerExtra?.poi.name}`
            }}</view>
          </view>
        </view>
      </template>
      <journalList :list="openJournalsRef" />
    </popupFlex>


    <!-- 搜索区域 -->
    <uv-popup ref="popup" mode="bottom" custom-style="min-height:300rpx;padding:20rpx">
      <view style="padding-bottom: 50px;">
        <uv-search @search="handleSearch" @input="handleSearch" searchIcon="" :showAction="false" placeholder="用户ID"
          v-model="searchKeyRef">
        </uv-search>
      </view>
    </uv-popup>

    <!-- 右侧 功能按钮区 -->
    <view class="friend-right-side__warpper">

      <!-- 去首页 -->
      <navigator url="/pages/index/index" open-type="navigate" hover-class="navigator-hover">
        <uv-icon class="mb-20" name="home" size="28"></uv-icon>
      </navigator>

      <!-- 搜索 -->
      <uv-icon @click="popup!.open()" name="account-fill" size="28"></uv-icon>
    </view>
  </div>
</template>

<style scoped lang='scss'>
@import "@/styles/mixin/index.scss";

@import "./friend.scss";
</style>